<script setup lang="ts">
import { defineProps } from "vue";
defineProps({
  title: {
    type: String,
    default: "",
  },
});
</script>
<template>
  <div class="box">
    <div class="title">
      <div class="title-icon">
        <div
          style="transform: scaleX(-1); text-align: end; padding-right: 110px"
        >
          <slot name="title">{{ title }}</slot>
        </div>
      </div>
    </div>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>
<style scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.title {
  height: 60px;
  background-image: url("/title-left.png");
  transform: scaleX(-1);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.content {
  flex: 1;
  padding:5px 20px;
  overflow: hidden;
}
.title-icon {
  background-image: url("/lingxing.png");
  background-repeat: no-repeat;
  background-position-x: 70px;
  /* background-position-y: -6px; */
  background-size: 100;
  width: 100%;
  height: 100%;
  text-indent: 110px;
  font-size: 18px;
  font-family: "MyFont1";
  padding-top: 3px;
}
</style>
